<style lang="less" scoped>
.total-price{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.count-info{
  font-weight: bold;
}
</style>
<template>
  <div class="total-price">
      <input-number :amount="1" :customFun="changeNum" :outerStyle="outerStyle"></input-number>
      <span for="count">
        商品总价: <span class="count-info">￥{{ value }}</span>
      </span>
  </div>
</template>

<script>

  import {EventBus} from '../eventBus'
  import InputNumber from './inputNumber.vue'

  export default {
    components: {
        'input-number': InputNumber
    },
    props: {
      total: {
        default: 0
      },
      outerStyle: {
        default: "display:inline-block;margin-right: 10px;"
      }
    },
    data () {
      return {
        value: this.total
      }
    },
    methods: {
      changeNum (num, callback) {
        this.value = this.total * num
        EventBus.$emit("getProductCount", num)
        callback.call(this, true)
      }
    }
  }
</script>
